<template>
  <div>
    <el-card class="box-card" style="margin-left: 100px;margin-top:40px;width: 1000px;height: 520px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!--题型管理选项卡-->
        <el-tab-pane label="已发布的公告" name="already">
          <el-table
              :data="announcementList"
              style="width: 100%">
            <el-table-column
                prop="time"
                label="发布时间"
                width="160">
            </el-table-column>
            <el-table-column
                prop="content"
                label="公告内容"
                width="160">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作"
                width="250">
              <template slot-scope="scope">
                <el-button type="warning" plain @click="deleteAnnouncement(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="发布新公告" name="new">
          <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="addAnnouncementContent" class="input-with-select" style="width: 900px">
              <el-button slot="append" type="info" @click="addAnnouncementBtn">发布</el-button>
            </el-input>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!--分页组件-->
      <div class="block" v-show="showPagination" style="float:left;margin-left: 200px" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[3, 5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "adminUserCenter-manageAnnouncement",
  data(){
    return{
      announcementList:[{
        id:'',content:'',time:''
      }],
      addAnnouncementContent:'',//要发布公告的内容
      pageNo: 1, //当前页数
      pageSize: 3, //显示条数
      total: 0, //总条数
      showPagination: true, //分页栏是否显示
    }
  },
  methods:{
//切换选项卡，题型管理，难度等级管理等
    handleClick(tab, event) {
      if(this.activeName=='already'){
        this.showPagination=false;
        this.getAnnouncementList();
      }else{
        this.total=0;
        this.pageNo=1;
        this.pageSize=3;
        this.showPagination=false;
        this.getDicValue();
        console.log(tab, event);
      }

    },
    //分页相关
    handleSizeChange(val) {
      this.pageSize=val;
      this.pageNo=1;//当切换一页显示几个的时候，我们要把页码切换第一页
      this.getAnnouncementList();
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo=val;
      this.getAnnouncementList();
      //console.log(`当前页: ${val}`);
    },
    //加载页面执行默认选择已发布的公告
    loadFunction(){
      this.activeName='already';
      this.getAnnouncementList();
    },
    //获取公告列表
    getAnnouncementList(){
      this.$axios.post("/api/adminUserCenter/getAnnouncementListJ",{
        pageNo:(this.pageNo - 1) * this.pageSize,
        pageSize:this.pageSize
      }).then(resp=>{
          this.announcementList=resp.data.data.announcementList;
          this.total=resp.data.data.total;
          if(this.announcementList.length==0){
            this.showPagination=false;
          }else{
            this.showPagination=true;
          }
      })
    },
    //删除公告按钮
    deleteAnnouncement(id){
      this.$confirm('此操作将删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post("/api/adminUserCenter/deleteAnnouncementJ",{
          id:id
        }).then(resp=>{
          this.getAnnouncementList();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //发布按钮
    addAnnouncementBtn(){
      if(this.addAnnouncementContent=='' || this.addAnnouncementContent==null){
        this.$message({
          type: 'error',
          message: '公告不能为空!'
        });
      }else if(this.addAnnouncementContent.length>255){
        this.$message({
          type: 'error',
          message: '公告最多255个字符!'
        });
      }else{
        this.$axios.post("/api/adminUserCenter/addAnnouncementJ",{
          content:this.addAnnouncementContent
        }).then(resp=>{
          this.addAnnouncementContent='';
          this.$message({
            type: 'success',
            message: '添加公告成功'
          });
        })
      }
    }
  },
  created() {
    //获取已发布的公告列表
    this.getAnnouncementList();
    //刚加载页面默认选项卡选择已发布的公告
    this.loadFunction();
  }
}
</script>

<style scoped>

</style>